<template>
    <div class="dashboard" style="padding: 20px; background-color: #f5f7fa; min-height: 100vh;">
        <el-row :gutter="0" style="margin-bottom: 16px">
            <!-- 左侧：主标题 + 时间范围 -->
            <el-col :span="16" :xs="24" :sm="16">
                <div class="flex items-baseline space-x-3">
                    <h2 class="text-xl font-semibold text-gray-800">核心指标概览</h2>
                    <el-tag size="small" type="info" effect="light" class="text-xs">
                        本周
                    </el-tag>
                    <span class="text-sm text-green-600 font-medium">
          ↑ 整体向好
        </span>
                </div>
                <p class="text-sm text-gray-500 mt-1">
                    包含销售额、访客、转化率、订单等 {{ kpiCards.length }} 项关键数据
                </p>
            </el-col>

        </el-row>
        <!-- 顶部 KPI 卡片 -->
        <el-row :gutter="16" style="margin-bottom: 20px;">
            <el-col v-for="(card, index) in kpiCards" :key="index" :span="24/kpiCards.length">
                <el-card :style="{ backgroundColor: card.color, color: '#f9f1f1' }" shadow="hover">
                    <i :class="`el-icon-${card.icon}`" style="font-size: 28px; margin-bottom: 10px;"></i>
                    <div class="kpi-title">{{ card.title }}</div>
                    <div class="kpi-value">{{ card.value }}</div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 主区域：3:1 布局 -->
        <el-row :gutter="16">
            <!-- 左侧 75%：三大业务图表 -->
            <el-col :span="18">
                <!-- 生产进度趋势图 -->
                <el-card shadow="hover" style="margin-bottom: 20px;">
                    <template #header>
                        <span style="font-weight: 600;">本周生产进度趋势</span>
                    </template>
                    <div ref="productionChart" style="height: 300px;"></div>
                </el-card>

                <!-- 下方两列：采购 & 销售 -->
                <el-row :gutter="20">
                    <!-- 供应商TOP5 -->
                    <el-col :span="12">
                        <el-card shadow="hover">
                            <template #header>
                                <span style="font-weight: 600;">供应商供货TOP5</span>
                            </template>
                            <div ref="supplierChart" style="height: 300px;"></div>
                        </el-card>
                    </el-col>

                    <!-- 订单状态分布 -->
                    <el-col :span="12">
                        <el-card shadow="hover">
                            <template #header>
                                <span style="font-weight: 600;">销售订单状态分布</span>
                            </template>
                            <div ref="orderChart" style="height: 300px;"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>

            <!-- 右侧 25%：系统状态 -->
            <el-col :span="6">
                <el-card shadow="hover" style="margin-bottom: 20px;">
                    <template #header>
                        <span style="font-weight: 600;">当前排班班组</span>
                    </template>
                    <el-tag v-for="team in onDutyTeams" :key="team" size="small" style="margin: 4px;">{{
                            team
                        }}
                    </el-tag>
                    <p v-if="onDutyTeams.length === 0" style="color: #999; font-size: 13px;">今日无排班</p>
                </el-card>

                <el-card shadow="hover" style="margin-bottom: 20px;">
                    <template #header>
                        <span style="font-weight: 600;">库存预警</span>
                    </template>
                    <div>低于安全库存物料数：<strong style="color: #F56C6C;">{{ lowStockCount }}</strong></div>
                </el-card>

                <el-card shadow="hover" style="margin-bottom: 20px;">
                    <template #header>
                        <span style="font-weight: 600;">待审批单据</span>
                    </template>
                    <div>共 <strong>{{ pendingApprovals }}</strong> 项待处理</div>
                </el-card>

                <el-card shadow="hover">
                    <template #header>
                        <span style="font-weight: 600;">最近报工记录</span>
                    </template>
                    <div v-for="item in recentReports" :key="item.report_id"
                         style="font-size: 13px; color: #666; margin-bottom: 8px;">
                        <div><strong>{{ item.quantity }}</strong> 件 - {{ item.time }}</div>
                    </div>
                    <div v-if="recentReports.length === 0" style="color: #999; font-size: 13px;">暂无报工</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'Dashboard',
    data() {
        return {
            // 顶部KPI卡片数据
            kpiCards: [
                {title: '今日排产任务', value: '24', icon: 'calendar', color: '#80bbff'},
                {title: '待质检成品', value: '156', icon: 'document-checked', color: '#ffca80'},
                {title: '本月采购额(万)', value: '186.5', icon: 'money', color: '#ff8080'},
                {title: '订单交付率', value: '92.3%', icon: 'truck', color: '#a9ff7f'}
            ],

            // 右侧面板数据
            onDutyTeams: ['机加工一组', '组装三班'],
            lowStockCount: 7,
            pendingApprovals: 5,
            recentReports: [
                {report_id: 'RP001', quantity: 50, time: '10:30'},
                {report_id: 'RP002', quantity: 30, time: '09:15'},
                {report_id: 'RP003', quantity: 20, time: '08:45'}
            ],

            // 图表实例
            productionChartInstance: null,
            supplierChartInstance: null,
            orderChartInstance: null
        };
    },
    mounted() {
        // 初始化图表
        this.initProductionChart();
        this.initSupplierChart();
        this.initOrderChart();
    },
    methods: {
        initProductionChart() {
            this.productionChartInstance = echarts.init(this.$refs.productionChart);
            const option = {
                tooltip: {trigger: 'axis'},
                legend: {data: ['计划产量', '实际产量']},
                xAxis: {type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},
                yAxis: {type: 'value'},
                series: [
                    {
                        name: '计划产量',
                        type: 'line',
                        data: [80, 90, 100, 100, 95, 0, 0],
                        itemStyle: {color: '#409EFF'}
                    },
                    {
                        name: '实际产量',
                        type: 'line',
                        data: [75, 88, 92, 80, 40, 0, 0],
                        itemStyle: {color: '#67C23A'}
                    }
                ]
            };
            this.productionChartInstance.setOption(option);
        },

        initSupplierChart() {
            this.supplierChartInstance = echarts.init(this.$refs.supplierChart);
            const option = {
                tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
                xAxis: {type: 'value', show: false},
                yAxis: {
                    type: 'category',
                    data: ['A供应商', 'B公司', 'C实业', 'D科技', 'E制造'],
                    axisLabel: {color: '#333'}
                },
                series: [
                    {
                        type: 'bar',
                        data: [180, 150, 120, 100, 85],
                        label: {show: true, position: 'right', formatter: '{c}万'},
                        itemStyle: {color: '#409EFF'}
                    }
                ]
            };
            this.supplierChartInstance.setOption(option);
        },

        initOrderChart() {
            this.orderChartInstance = echarts.init(this.$refs.orderChart);
            const option = {
                tooltip: {trigger: 'item'},
                legend: {bottom: '5%', left: 'center'},
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '45%'],
                        label: {show: false},
                        data: [
                            {value: 32, name: '已确认', itemStyle: {color: '#67C23A'}},
                            {value: 8, name: '待审批', itemStyle: {color: '#E6A23C'}},
                            {value: 25, name: '已发货', itemStyle: {color: '#409EFF'}},
                            {value: 3, name: '已退货', itemStyle: {color: '#F56C6C'}},
                            {value: 2, name: '已关闭', itemStyle: {color: '#909399'}}
                        ],
                        labelLine: {show: true}
                    }
                ]
            };
            this.orderChartInstance.setOption(option);
        }
    },
    beforeUnmount() {
        // 销毁图表实例
        if (this.productionChartInstance) this.productionChartInstance.dispose();
        if (this.supplierChartInstance) this.supplierChartInstance.dispose();
        if (this.orderChartInstance) this.orderChartInstance.dispose();
    }
};
</script>

<style scoped>
.kpi-title {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.kpi-value {
    font-size: 22px;
    font-weight: bold;
}
</style>